/* components */
/* components */
import { 
  SettingGPTViewHeader,
  SettingGPTViewContent,
  SettingGPTViewContentTitle,
  SettingGPTViewContentSubTitle
} from "@gpt/components";
/* enum */
import ComponentNameEnum from "@model/enum/ComponentNameEnum";
/* model */
import { SettingGPTTranslateToLanguageEnum, SettingGPTTranslateToLanguageEnumCNNameEnum } from "@gpt/model";
/* vue */
import { defineComponent } from "vue";
/* scss */
import "@gpt/views/translate/index.scss";
/* hooks */
import { useSettingGPTRobotAppTranslate } from "@gpt/hooks";

export default defineComponent({
  name: ComponentNameEnum.SettingGPTTranslateView,
  components: {
    
  },
  props: {
    
  },
  setup(props, { emit }) {
    
    const {
      loading,
      initialize,
      gptRobotApp,
      onUpdateRobotAppTranslateHandler
    } = useSettingGPTRobotAppTranslate()
    
    return {
      loading,
      initialize,
      onUpdateRobotAppTranslateHandler,
      gptRobotApp
    }
    
  },
  data() {
    return {
      
    }
  },
  computed: {
    attrs(): Record<string, any> {
      return {
        directives: [
          {
            name: 'loading',
            value: this.loading
          }
        ]
      }
    },
    title(): string {
      return '智能翻译';
    },
    subTitle(): string {
      return '帮助您服务来自不同语种、不同国家的客户，开始企业全球服务之路。';
    },
    contentTitle(): string {
      return '翻译设置';
    },
    contentSubTitle(): string {
      return '应用该服务后，您与小宝的对话将自动被翻译成以下设定的语言。';
    },
    translateToLanguage(): string {
      return this.gptRobotApp.setting?.translateToLanguage || ''
    },
    translateToLanguageList(): { key: string, value: string }[] {
      return Object.keys(SettingGPTTranslateToLanguageEnumCNNameEnum).map((key) => {
        return {
          key,
          value: SettingGPTTranslateToLanguageEnumCNNameEnum[key] as string
        }
      })
    }
  },
  methods: {
    onInputTranslateToLanguageHandler(value: string) {
      this.gptRobotApp.setting.translateToLanguage = value;
      this.onUpdateRobotAppTranslateHandler(value);
    },
    renderTranslateToLanguage() {
      return (
        <div class={`${ComponentNameEnum.SettingGPTTranslateView}-translate-to-language`}>
          <div class={`${ComponentNameEnum.SettingGPTTranslateView}-translate-to-language-title`}>
            <span>翻译成</span>
          </div>
          <div class={`${ComponentNameEnum.SettingGPTTranslateView}-translate-to-language-content`}>
            {this.renderTranslateToLanguageSelect()}
          </div>
        </div>
      )
    },
    renderTranslateToLanguageSelect() {
      return (
        <div class={`${ComponentNameEnum.SettingGPTTranslateView}-translate-to-language-select`}>
          <el-select 
            placeholder="请选择"
            value={this.translateToLanguage} 
            onInput={this.onInputTranslateToLanguageHandler}
          >
            {
              this.translateToLanguageList.map((item) => {
                return (
                  <el-option
                    key={item.key}
                    label={item.value}
                    value={item.key}
                  >
                  </el-option>
                )
              })
            }
          </el-select>
        </div>
      )
    }
  },
  created() {
    
  },
  mounted() {
    this.initialize()
  },
  render() {
    return (
      <div class={ComponentNameEnum.SettingGPTTranslateView}>
        
        <SettingGPTViewHeader
          title={this.title}
          subTitle={this.subTitle}
        >
        </SettingGPTViewHeader>
        
        <SettingGPTViewContent {...this.attrs}>
          
          <SettingGPTViewContentTitle
            title={this.contentTitle}
          >
          </SettingGPTViewContentTitle>
          
          <SettingGPTViewContentSubTitle
            title={this.contentSubTitle}
          >
          </SettingGPTViewContentSubTitle>
          
          {this.renderTranslateToLanguage()}
          
        </SettingGPTViewContent>
        
      </div>
    )
  }
});